<template>
  <div class="earlyWarning">
    <el-button
      class="history btn-nav-bg stripe-btn"
      @click="$router.push({ path: '/' })"
      >返回</el-button
    >
    <h2>换流阀概况</h2>
    <el-carousel
      :interval="5000"
      :loop="false"
      indicator-position="none"
      :autoplay="false"
      arrow="always"
      class="carousel"
    >
      <el-carousel-item
        class="carousel-item"
        v-for="(itemList, index) in allList"
        :key="index"
      >
        <div
          class="item"
          v-for="(item, idx) in itemList"
          :key="'carousel' + idx"
          @click="handle(item.siteId, item.site)"
        >
          <h3>{{ item.site }}</h3>
          <div class="info">
            <div class="detail" v-for="(i, idx) in item.controlList" :key="idx">
              <div class="top">
                <h4>{{ i.state }}</h4>
                <p>{{ i.controlName }}</p>
                <span>健康状态</span>
                <!--                <span-->
                <!--                  class="state-icon"-->
                <!--                  :style="getIconBgColor(i.state)"-->
                <!--                ></span>-->
              </div>
              <div class="bot">
                <h4>{{ i.rate + "%" }}</h4>
                <p>{{ i.controlName }}</p>
                <span>子模块正常率</span>
              </div>
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { siteSurvey } from "@/api/earlyWarning";
export default {
  name: "",
  data() {
    return {
      initialIndex: 0,
      allList: [],
      itemList: [],
    };
  },
  mounted() {
    this.getSiteSurvey();
  },
  methods: {
    handle(siteId, site) {
      this.$router.push({
        path: "/earlyWarning",
        query: { siteId: siteId, site: site },
      });
    },
    getIconBgColor(state) {
      return {
        "background-color":
          state == "正常"
            ? "#1cbe21"
            : state == "异常"
            ? "#ffaa00"
            : state == "故障"
            ? "#ff3737"
            : "#1cbe21",
      };
    },
    getSiteSurvey() {
      siteSurvey().then((res) => {
        if (res.code == 20000) {
          let arr = res.data;

          let newDataList = [];
          let current = 0;
          if (Array.isArray(arr) && arr.length > 0) {
            for (let i = 0; i <= arr.length - 1; i++) {
              if (i % 3 !== 0 || i === 0) {
                //数据处理成几张展示
                if (!newDataList[current]) {
                  newDataList.push([arr[i]]);
                } else {
                  newDataList[current].push(arr[i]);
                }
              } else {
                current++;
                newDataList.push([arr[i]]);
              }
            }
          }
          this.allList = [...newDataList];
        }
      });
    },
    handleChange() {},
  },
};
</script>
<style lang="less">
.earlyWarning {
  .carousel {
    .el-carousel__container {
      height: 100% !important;
      .el-carousel__arrow {
        width: 64px;
        height: 64px;
        font-size: 48px;
        font-weight: bold;
      }
    }
  }
}
</style>
<style scoped lang="less">
.earlyWarning {
  height: 100%;
  width: 100%;
  position: relative;
  .history {
    position: absolute;
    top: 5%;
    left: 15%;
  }
  h2 {
    font-size: 22px;
    color: rgb(0, 246, 255);
    font-weight: 500;
    margin-top: 5%;
    text-align: center;
  }
}
.carousel {
  width: 80%;
  height: 50%;
  margin: 5% auto 0;
  .el-icon-arrow-right {
    color: #ffffff;

    &:before {
      position: absolute;
      content: "";
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 0;
      height: 0;
      border-left: 15px solid #86fffb;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
    }
  }
  .el-icon-arrow-left {
    color: #ffffff;
    &:before {
      position: absolute;
      content: "";
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 0;
      height: 0;
      border-right: 15px solid #86fffb;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
    }
  }
  .el-carousel__container {
    height: 100% !important;
  }
  .carousel-item {
    width: 90%;
    height: 100%;
    margin: 0 5%;
    display: flex;
    justify-content: space-around;

    .item {
      width: 32%;
      background: linear-gradient(-69.7deg, #091318, #203136);
      border: 1px solid #006686;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      cursor: pointer;
      .info {
        height: calc(100% - 80px);
        display: flex;
        justify-content: space-around;
      }

      .detail {
        text-align: center;

        .top {
          margin-top: 15px;
          margin-bottom: 15px;
        }

        h4 {
          color: #ffffff;
          font-size: 30px;
          font-weight: 500;
          line-height: 2em;
        }

        p {
          color: rgba(255, 255, 255, 0.8);
          font-size: 14px;
          line-height: 1.5em;
        }

        span {
          color: rgba(255, 255, 255, 0.8);
          font-size: 14px;
          line-height: 1.5em;
        }

        span.state-icon {
          display: inline-block;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          border: 1px solid #3099d1;
          margin-right: 5px;
          background: rgba(48, 153, 209, 0.2);
        }
      }

      h3 {
        text-align: center;
        color: #ffffff;
        font-size: 22px;
        font-weight: 500;
        line-height: 3em;
        height: 66px;
        margin-top: 24px;
        background: url("../../assets/images/type_bg.png") no-repeat center
          center;
        background-size: 90% 80%;
        //margin-bottom: 30px;
        //margin-top: 40px;
      }
    }
  }
}
</style>
